<template>
  <yd-checkbox-group v-model="checkBox" :color="color" v-if="!!list.length" class="boxes">
    <yd-checkbox :val="val.value" v-for="(val, key) in list" :key="key" class="xf-checkbox">{{val.name}}</yd-checkbox>
  </yd-checkbox-group>
</template>

<script>
  import {MAIN_COLOR} from '../../common/js/config'

  export default {
    name: 'xf-check-box',
    props: {
      list: {type: Array, default: () => []},
      value: {type: String, default: ''}
    },
    computed: {
      checkBox: {
        get() {
          return this.value ? this.value.split(',') : []
        },
        set(val) {
          const str = val.join(',')
          this.$emit('input', str)
        }
      }
    },
    data() {
      return {
        color: MAIN_COLOR
      }
    },
    created() {}
  }
</script>

<style scoped lang="scss">
  .boxes{
    padding: .25rem 0 .1rem 0;
    text-align: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .xf-checkbox{
    padding-bottom: .15rem;
    display: flex;
    align-items: center;
  }
</style>
